chore: Add icon size and stroke width props#4514
Open
at-susie wants to merge 29 commits into
Open
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #4514 +/- ##
=======================================
Coverage 97.42% 97.42%
=======================================
Files 938 938
Lines 29647 29677 +30
Branches 10774 10790 +16
=======================================
+ Hits 28884 28914 +30
+ Misses 756 716 -40
- Partials 7 47 +40 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
- Add x-small and large icon size variants to complement existing sizes - Create IconSizes component showcasing all icon size options (x-small, small, normal, medium, big, large) - Update icon-scale-props page to display icon sizes in typography headings with size labels - Refactor icon size display from static list to dynamic mapped component - Add delivery method form field example to ButtonsInputsDropdowns section - Remove section separator comments for cleaner code organization - Update icon provider and icon interfaces to support new size variants - Update icon mixins and styling for new size tokens - Add x-small and large size tokens to style dictionary borders and sizes - Update token name utilities and metadata for new size variants - Update all related snapshot tests to reflect new icon size options
at-susie
force-pushed
the
feat/custom-icon-size
branch
from
2f5eb33 to
1d370b1
Compare
- Add `sizes` prop to IconProvider to customize icon dimensions per size variant - Add `strokeWidths` prop to IconProvider to customize stroke widths per size variant - Support scoped overrides at any level of the component tree - Update IconProvider internal implementation to apply size and stroke-width overrides - Update Icon internal implementation to respect provider overrides - Add comprehensive API proposal documentation with usage examples and design rationale - Update icon provider dev page to demonstrate new scale props functionality - Update icon-related dev pages (custom SVG, icons list, text align) to reflect changes - Update snapshot tests to reflect new IconProvider interface and behavior
- Replace numeric IDs ('1', '2', '3', etc.) with semantic prefixed IDs ('action-1', 'action-2', 'action-3', etc.)
- Update all nested child node IDs to follow the new naming convention
- Update expandedItems state initialization to use new semantic IDs
- Improve ID clarity and maintainability in icon-scale-props demo page
pan-kot
reviewed
May 21, 2026
|
|
||
| return <InternalIconContext.Provider value={iconsToProvide}>{children}</InternalIconContext.Provider>; | ||
| // Build the size override map by merging parent context with this provider's sizes prop. | ||
| const sizeOverridesToProvide = useMemo<IconSizeOverrideMap>(() => { |
Member
There was a problem hiding this comment.
how is that different from { ...contextSizeOverrides, ...sizes }?
Member
Author
There was a problem hiding this comment.
You're right. Simplified both the sizes and strokeWidths merge blocks to { ...contextSizeOverrides, ...sizes } and { ...contextStrokeWidthOverrides, ...strokeWidths } respectively.
pan-kot
reviewed
May 21, 2026
| : strokeScale | ||
| ? ({ [customCSSPropertiesMap.iconStrokeScale]: strokeScale } as React.CSSProperties) | ||
| : {}), | ||
| }; |
Member
There was a problem hiding this comment.
nit, the core above is difficult to read. I recommend refactoring it e.g. as:
const styles = {}
if (contextualSize && parentHeight !== null) {
styles.height = ...
}
if (strokeWidthOverride) {
styles[customCSSPropertiesMap.iconStrokeWidthOverride] = strokeWidthOverride
}
// ...
Member
Author
There was a problem hiding this comment.
Done — refactored to the imperative style you suggested:
pan-kot
reviewed
May 21, 2026
| return ( | ||
| <InternalIconContext.Provider value={iconsToProvide}> | ||
| <InternalIconSizeOverrideContext.Provider value={sizeOverridesToProvide}> | ||
| <InternalIconStrokeWidthOverrideContext.Provider value={strokeWidthOverridesToProvide}> |
Member
There was a problem hiding this comment.
Why do we need 3 contexts? As icon provider context is internal, we should be able to change its type to include icons, size overrides, and stroke width overrides.
Member
Author
There was a problem hiding this comment.
That's a great call. I consolidated them into one context
pan-kot
reviewed
May 21, 2026
| // By setting --icon-stroke-scale to basePx/targetPx, the visual stroke stays at the themed value. | ||
| let targetSizePx: number | undefined; | ||
| let strokeScale: number | undefined; | ||
| if (!contextualSize) { |
Member
There was a problem hiding this comment.
This logic is difficult to read. The strokeScale is only computed when size is not contextual. This is clear from this block, but not from the one below where the inline style is created. Can we refactor the code e.g. as:
const inlineStyles: React.CSSProperties = {};
const setVar = (key: string, value: string) => ((inlineStyles as Record<string, unknown>)[key] = value);
if (contextualSize && parentHeight !== null) {
inlineStyles.height = `${parentHeight}px`;
}
if (!contextualSize) {
const override = computeSizeOverrides({ sizeOverrides, strokeWidthOverrides, iconSize });
if (override.size) {
setVar(customCSSPropertiesMap.iconSizeOverride, `${override.size}px`);
}
if (override.strokeWidth) {
setVar(customCSSPropertiesMap.iconStrokeWidthOverride, override.strokeWidth);
} else if (override.strokeScale) {
setVar(customCSSPropertiesMap.iconStrokeScale, override.strokeScale);
}
}
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds:
1. New sizes and strokeWidths props on IconProvider:
Extend the existing IconProvider component with two new props — sizes and strokeWidths — that allow overriding icon dimensions and stroke widths at any level of the component tree.
In a nutshell, this proposal enables icon size and stroke-width customization by overriding the inline size and stroke-width of both the icon SVG and its wrapper element via the existing IconProvider.
Because the icon-provider already establishes a predictable scoping mechanism, icon sizes can be flexibly adjusted at different levels of the UI while maintaining consistent behavior.
This approach:
2. A new x-small icon size variant (12px) for the icon component:
While it’s not currently used by any existing components, it supports future use cases we’ve already identified, such as icons inside badge components and icons used in button groups within prompt inputs.
How has this been tested?
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.